<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:composite="http://java.sun.com/jsf/composite"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <composite:interface>
        <composite:editableValueHolder name="datepicker"/>
        <composite:attribute name="valueChangeListener" targets="datepicker" />
        <composite:attribute name="theme" type="java.lang.String" default="ui-lightness"/>
    </composite:interface>
    <composite:implementation>
        <h:outputScript library="jquery" name="jquery.min.js" target="head"/>
        <h:outputScript library="jquery-ui" name="jquery-ui.min.js" target="head"/>
        <c:choose>
            <c:when test="#{not empty jqueryThemeManager and not empty jqueryThemeManager.theme}">
                <h:outputStylesheet name="jquery-ui/1_7_2/#{jqueryThemeManager.theme}/theme.css" target="head"/>
            </c:when>
            <c:otherwise>
                <h:outputStylesheet name="jquery-ui/1_7_2/#{cc.attrs.theme}/theme.css" target="head"/>
            </c:otherwise>
        </c:choose>
        <script type="text/javascript">
            $(document).ready(function() {
                $(function() {
                    $("##{cc.clientId}:datepicker".replace(/:/g,"\\:")).datepicker();
                });
            });
        </script>
        <h:inputText id="datepicker">
            <composite:insertChildren/>
        </h:inputText>
    </composite:implementation>
</html>